<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <div>
          <flightsFilters
            v-if="flightsData.options"
            :options="flightsData.options"
            :flights="cacheFlightsList"
            @setDatdLit="setDatdLit"
          />
        </div>

        <!-- 航班头部布局 -->
        <div>
          <!-- 航班头部组件 -->
          <flightsListHead />
        </div>

        <!-- 航班信息 -->
        <div>
          <flightsItem :data="item" v-for="item in dataList" :key="item.id" />

          <div v-if="flightsData.flights && flightsData.flights.length == 0">
            暂无数据
          </div>
        </div>
        <!-- 分页 -->
        <el-pagination
          v-if="flightsData.flights"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="flightsData.flights.length"
        >
        </el-pagination>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 侧边栏组件 -->
        <flightsAside />
      </div>
    </el-row>
  </section>
</template>

<script>
import moment from "moment";
import flightsListHead from "@/components/air/flightsListHead";
import flightsItem from "@/components/air/flightsItem";
import flightsFilters from "@/components/air/flightsFilters";
import flightsAside from "@/components/air/flightsAside";
export default {
  data() {
    return {
      flightsData: {},
      // 机票分页数据
      pageIndex: 1,
      pageSize: 10
      // dataList: []
    };
  },
  computed: {
    dataList() {
      if (!this.flightsData.flights) {
        return [];
      }
      const beginIndex = (this.pageIndex - 1) * this.pageSize; //起始值
      const endIndex = this.pageSize + beginIndex;
      return (this.dataList = this.flightsData.flights.slice(
        beginIndex,
        endIndex
      ));
    }
  },
  methods: {
    // 封装请求数据函数
    loadPage() {
      this.$axios({
        url: "/airs",
        params: this.$route.query
      }).then(res => {
        console.log(res.data);
        this.flightsData = res.data;
        // 将机票数据先缓存起来
        this.cacheFlightsList = res.data.flights;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
    },
    setDatdLit(value) {
      console.log(value);
      this.flightsData.flights = value;
    }
  },
  components: {
    flightsListHead,
    flightsItem,
    flightsFilters,
    flightsAside
  },
  watch: {
    $route() {
      this.loadPage();
    }
  },
  created() {
    this.loadPage();
  }
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>
